<!-- 邀请有礼 -->
<template>
  <view>
    <aster-back font-color="#fff" />
    <view class="top" />
    <view class="slogan">
      每邀请一位得
      <text class="slogan__num">{{ num }}</text>
      元红包
    </view>
    <view>
      <button class="btn" @click="invite()">立即邀请</button>
    </view>
    <view class="tip"> 邀请好友时将跳转至微信页面 </view>
    <view class="step">
      <view class="step__title">简单三步 立享权益</view>
      <view class="step__content">
        <view class="item">
          <text class="item__num">1</text>
          <text class="item__explain">分享链接<br />给好友</text>
        </view>
        <view class="item">
          <text class="item__num">2</text>
          <text class="item__explain">好友接受<br />邀请</text>
        </view>
        <view class="item">
          <text class="item__num">3</text>
          <text class="item__explain">好友登录<br />完成实名认证</text>
        </view>
      </view>
    </view>
    <view class="rule">
      <view class="title">活动规则</view>
      <view class="content">
        <p> 1.活动时间：2023年5月1日-2023年12月31日 </p>
        <p>
          2.活动限制：需邀请App新用户（即从未注册过App的用户），被邀请用户登录后需完成实名认证
        </p>
        <p> 3.通过分享邀请页邀请到1个App新用户，邀请人可获得5元红包，被邀请人可获得10元红包 </p>
        <p> 4.邀请人可重复发起邀请活动，被邀请人限新用户 </p>
        <p> 5.邀请奖励在新用户完成实名认证后的24小时内到账 </p>
        <p> 6.活动解释权归App运营方所有 </p>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import { ref } from 'vue';

  const num = ref(5);

  // 邀请
  const invite = () => {
    //TODO 微信对接
  };
</script>
<style lang="scss">
  page {
    background-image: url('@/static/images/invite/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 20rpx;
  }

  .top {
    width: 100%;
    height: 460rpx;
  }

  .slogan {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;

    &__num {
      font-size: 40rpx;
      margin: 0 10rpx;
      font-weight: bold;
    }
  }

  .btn {
    background-color: #ffba02;
    width: 60%;
    color: #fff;
    padding: 10rpx;
  }

  .tip {
    display: flex;
    justify-content: center;
    color: #bbb;
    padding: 4rpx;
    font-size: 12px;
  }

  .step {
    background-color: #fff;
    border-radius: 10rpx;
    margin: 20rpx;

    &__title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      font-weight: bold;
      padding: 20rpx 0;
      color: #b36f28;
    }

    &__content {
      display: flex;
      justify-content: center;
      align-items: center;

      .item {
        display: flex;
        align-items: center;
        flex-flow: column;
        flex: 1;
        padding: 10rpx 0;

        &__num {
          background-color: #bc7e45;
          border-radius: 50%;
          width: 40rpx;
          height: 40rpx;
          color: #fff;

          display: flex;
          justify-content: center;
          align-items: center;
        }

        &__explain {
          font-size: 24rpx;
          text-align: center;
          line-height: 1.2;
          padding: 20rpx 0;
          color: #b47f4d;
        }
      }
    }
  }

  .rule {
    margin: 40rpx 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    padding: 0 20rpx;

    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32rpx;
      padding: 20rpx 0;
    }

    .content {
      color: #6b6b6b;
      p {
        padding: 10rpx 0;
      }
    }
  }
</style>
